<!-- 游戏编辑弹窗 -->
<template>
  <el-dialog
    title="区服管理"
    :visible="visible"
    width="1000px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >

    <ele-pro-table
      ref="table"
      :where="where"
      :datasource="url"
      :columns="columns"
      :selection.sync="selection"
      height="calc(100vh - 485px)">

      <template slot="game_info" slot-scope="{row}">
        <div>
          <div class="game-info">
            <div class="game-img">
              <el-avatar shape="square" :size="25" :src="row.game_info.icon"/>
            </div>
            <div class="game-code" >
              游戏编码：{{row.game_info.id}}
            </div>
            <div class="game-name" >
              游戏名称：{{row.game_info.game_name}}
            </div>
          </div>
        </div>
      </template>

    </ele-pro-table>
  </el-dialog>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";




export default {
  name: 'BoxGameEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  // components: { uploadImage,PageSelect},

  data() {
    return {
      // 表格数据接口
      url: '/BoxGameOpen/index',
      // 表格列配置
      columns: [
        {
          prop: 'id',
          label: 'ID',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          columnKey: 'game_info',
          label: '游戏信息',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          slot: 'game_info'
        },
        {
          prop: 'name',
          label: '区服名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },

        {
          prop: 'status',
          label: '区服状态',
          align: 'center',
          width: 100,
          resizable: false,
          formatter: (row, column, cellValue) => {
            if (cellValue == 2) {
              return '停用'
            } else if (cellValue == 1) {
              return '开启'
            }
          }
        },
        {
          prop: 'open_time',
          label: '开服时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          prop: 'create_time',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },

      ],
      // 表格搜索条件
      where: Object.assign({}, {game_id:this.data.id}),
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
    };
  },
  watch: {
    'form.channel_id'(val) {
      if (val === 0) {
        this.$delete(this.form, 'pay_notify_url')
      } else {
        this.$set(this.form, 'pay_notify_url', '')
      }
    },
    visible() {
      this.where={game_id:this.data.id}
    }
  },
  methods: {
    /* 保存编辑 */
    // changeAppid(val) {
    //   this.$set(this.form, 'app_id', val)
    //   console.log(this.form)
    // },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http
            .post('/boxGame/edit', this.form)
            .then((res) => {
              this.loading = false
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                if (!this.isUpdate) {
                  this.form = {}
                }
                this.updateVisible(false)
                this.$emit('done')
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch((e) => {
              this.loading = false
              this.$message.error(e.message)
            })
        } else {
          return false
        }
      })
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>

<style scoped>
</style>
